<script setup>

import { reactive, ref } from 'vue';

let isActive = ref(true)
let isLine = ref(true)


</script>

<template>
<!-- 利用三目运算符语法 -->
<div v-bind:class="isActive? 'active': ''">Hello, World!</div>
<div v-bind:class="isLine? 'line': ''">Hello, World!</div>
</template>

<style scoped>
    .active {
        color: red;
    }

    .line {
        text-decoration: underline
    }
</style>